<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
   <script src="js/mui.min.js"></script>
    <link href="css/mui.min.css" rel="stylesheet"/>
    <script type="text/javascript" charset="utf-8">
      	mui.init();
    </script>
	    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
</head>
<body>
<div style="background-color: aquamarine;width: 100%;height: 2200px;"></div>
<div id="Video_div"  class="videoContainer"  style="display: flex;align-items: center;" >
	<video id="videoID"   x5-video-player-fullscreen="true" x5-video-player-type='h5' webkit-playsinline="true" controls  >
    <!-- <source src="http://vfx.mtime.cn/Video/2019/03/19/mp4/190319212559089721.mp4"  /> -->
	<source src="sp/49f0eec4c445db1a5297c9c2f930f7b1.mp4" />
</video>
<div class="control"> 
<a href="#" class="btnPlay">Play/Pause</a>
<a class="fullscreen" style="color: blue;" >全屏</a>
</div>
<!-- <div class="progressBar">
    <div class="timeBar"></div>
</div> -->
</div>

<div style="background-color: aquamarine;width: 100%;height: 1200px;"></div>

<style>
	/* //全屏按钮 */
	   video::-webkit-media-controls-fullscreen-button {
	        display: none;
	    }
	    /* //播放按钮 */
	    video::-webkit-media-controls-play-button {
	        display: none;
	    }
	    /* //进度条 */
	    video::-webkit-media-controls-timeline {
	        display: none;
	    }
	    /* //观看的当前时间 */
	    video::-webkit-media-controls-current-time-display{
	        display: none;            
	    }
	    /* //剩余时间 */
	    video::-webkit-media-controls-time-remaining-display {
	        display: none;            
	    }
	    /* //音量按钮 */
	    video::-webkit-media-controls-mute-button {
	        display: none;            
	    }
	    video::-webkit-media-controls-toggle-closed-captions-button {
	        display: none;            
	    }
	    /* //音量的控制条 */
	    video::-webkit-media-controls-volume-slider {
	        display: none;            
	    }
		video::-webkit-media-controls-enclosure {
			display: none;  
		}

		#Video_div{
			position: relative;
			width: 100%;
			height: 180px;
			overflow: hidden;
			
			/* float: left; */
		}
		#videoID{
			width: 100%;
			/* height: 200px; */
			z-index: 999;
		}
		.control{
			position: absolute;
			bottom: 26px;
			right: 16px;
			z-index: 1999;
		}

		/* 		.progressBar
				{
					position: relative;
					width: 100%;
					height: 10px;
					backgroud-color: #000;
				}
				.timeBar
				{
					position: absolute;
					top: 0;
					left: 0;
					width: 0;
					height: 100%;
					background-color: #ccc;
				} */
	

</style>
<script>
	var myscrollTop;
	var b;
	var b1;
	document.body.onscroll = function(){
		myscrollTop = document.documentElement.scrollTop || document.body.scrollTop;
		console.log('滚动条滑动了，当前滚动条位置',myscrollTop);
		b=	document.getElementById("Video_div").getBoundingClientRect().top
		console.log('外面盒子距离顶部距离',b);

		// if(place==2 && document.documentElement.scrollTop!=scrollTop2){
		// 	console.log('进入修改');
		// 	console.log('当前scrollTop2滚动条的位置',scrollTop2);
		// 	document.documentElement.scrollTop = scrollTop2;
		// 	// document.documentElement.scrollTop = document.documentElement.scrollTop - 200;
		// 	console.log('修改后的滚动条',document.documentElement.scrollTop);
		// 	place = 1;
		// }
	
	}
	
	
	
// var video = document.getElementById('videoID'); //or
// var video = $('#videoID').get(0); //or
// var video = $('#videoID')[0];
	var video = $('#videoID');

	$('.btnPlay').on('click', function() {
	    if(video[0].paused) {
	        video[0].play();
	    }
	    else {
	        video[0].pause();
	    }
	    return false;
	});
	
	
	
	let aa = false;
	let scrollTop;
	var place = 1;
	let scrollTop2;
	$('.fullscreen').on('click', function() {
		console.log('kkk');
		aa = !aa;
		if(aa){
			 // var ele = $("#Video_div")[0];
			 //    if (ele.requestFullscreen) {
			 //        ele.requestFullscreen();
			 //    } else if (ele.mozRequestFullScreen) {
			 //        ele.mozRequestFullScreen();
			 //    } else if (ele.webkitRequestFullScreen) {
			 //        ele.webkitRequestFullScreen();
			 //    }
			 
			console.log('进入全屏了');
			$("#Video_div")[0].requestFullscreen(); 
			scrollTop = document.documentElement.scrollTop;
			scrollTop2 = scrollTop;
			console.log('进入全屏后滚动条位置',scrollTop);
			console.log('进入全屏后滚动条位置',scrollTop2);
			b1 = JSON.parse(JSON.stringify(b));
			console.log('进入全屏之前盒子距离顶部的位置',b1);
			// place = 2;
		}else{
			// var de = document;
			//     if (de.exitFullscreen) {
			//         de.exitFullscreen();
			//     } else if (de.mozCancelFullScreen) {
			//         de.mozCancelFullScreen();
			//     } else if (de.webkitCancelFullScreen) {
			//         de.webkitCancelFullScreen();
			//     }
			console.log('退出全屏了');
			//1.一定要设置滚动条位置
			//2.当跳到0的时候，限制
			// console.log('进入视频时候video距离顶部距离:',b1,'，myscrollTop:',scrollTop);
			// if(b1<0&&myscrollTop==0){
			// 		console.log('进入跳0的，视频遮挡了的');
			// 		setTimeout(function() {
			// 			document.documentElement.scrollTop = scrollTop - 180 
			// 		}, 100);
			// }else if(b1<0&&myscrollTop==180){
			// 		console.log('进入跳0然后是180的，视频遮挡了的');
			// 	// document.documentElement.scrollTop = scrollTop2	- 180 
			// 	setTimeout(function() {
			// 		document.documentElement.scrollTop = scrollTop - 180 
			// 	}, 100);
			// }else{
			// 	console.log('进入跳0或没跳0的，视频没有被遮挡的');
			// 	if(document.documentElement.scrollTop!=scrollTop2-180){
			// 	document.documentElement.scrollTop = scrollTop2;
			// 		}
			// }
			// console.log('place',place);
			
			
			if(document.documentElement.scrollTop!=scrollTop2-180){
					document.documentElement.scrollTop = scrollTop2;
				}
			document.webkitCancelFullScreen(); 
			
			// console.log('scrollTop2',scrollTop2);
			console.log('退出全屏后设置滚动条位置为:',document.documentElement.scrollTop);
		}
		
		// $("#Video_div")[0].webkitEnterFullscreen(); 
		//For Firefox video.mozRequestFullScreen(); 
		return false; });
		

		
		
		
	// video.on('loadedmetadata', function() {
	//     $('.duration').text(video[0].duration);
	// });
	 
	// //update HTML5 video current play time
	// video.on('timeupdate', function() {
	//     var currentPos = video[0].currentTime; //Get currenttime
	//     var maxduration = video[0].duration; //Get video duration
	//     var percentage = 100 * currentPos / maxduration; //in %
	//     $('.timeBar').css('width', percentage+'%');
	// });	
		
	// var timeDrag = false;   /* Drag status */
	// $('.progressBar').mousedown(function(e) {
	//     timeDrag = true;
	//     updatebar(e.pageX);
	// });
	// $(document).mouseup(function(e) {
	//     if(timeDrag) {
	//         timeDrag = false;
	//         updatebar(e.pageX);
	//     }
	// });
	// $(document).mousemove(function(e) {
	//     if(timeDrag) {
	//         updatebar(e.pageX);
	//     }
	// });
	 
	// //update Progress Bar control
	// var updatebar = function(x) {
	//     var progress = $('.progressBar');
	//     var maxduration = video[0].duration; //Video duraiton
	//     var position = x - progress.offset().left; //Click pos
	//     var percentage = 100 * position / progress.width();
	 
	//     //Check within range
	//     if(percentage > 100) {
	//         percentage = 100;
	//     }
	//     if(percentage < 0) {
	//         percentage = 0;
	//     }
	 
	//     //Update progress bar and video currenttime
	//     $('.timeBar').css('width', percentage+'%');
	//     video[0].currentTime = maxduration * percentage / 100;
	// };	
</script>

</body>
</html>